<!DOCTYPE html>
<html>
  <head>
    <style>
      #graphiql {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    </style>
    <script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
    <script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>
    <script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/theme/solarized.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/graphiql/0.11.10/graphiql.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/graphiql/0.11.10/graphiql.js"></script>
  </head>
  <body>
    <div id="graphiql">Loading GraphiQL...</div>
    <script>
    const query = `{
  sayHello(input: {name: "world"}) {
    message
  }
}`;

    function fetcher(graphQLParams) {
      return fetch('/graphql', {
               method: 'post',
               headers: {
                 'Accept': 'application/json',
                 'Content-Type': 'application/json',
               },
               body: JSON.stringify(graphQLParams),
               credentials: 'include',
             })
          .then(response => response.text())
          .then(responseBody => {
            try {
              return JSON.parse(responseBody);
            } catch (error) {
              return responseBody;
            }
          });
    }

    ReactDOM.render(
      React.createElement(GraphiQL, {fetcher, query, editorTheme: "solarized"}),
      document.getElementById('graphiql')
    );
    </script>
  </body>
</html>
